
<div class="header">
  <span>已选终端：</span>
  <button class="btn btn-primary " (click)="addComputer()">添加终端</button>
</div>
<m-data-table *ngIf="persionnel$ | async as result" [data]="result.list"  [selection]="selection">
  <ng-container mDataTableColumn header="区域名称">
    <ng-template let-name="area_name">
      <td>{{ name }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="终端别名">
    <ng-template let-name="name">
      <td>{{ name }}</td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="在线">
    <ng-template let-online="online">
      <td><m-online-status-text [status]="online"></m-online-status-text></td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="状态">
    <ng-template let-status="status">
      <td><m-enable-status-text [status]="status"></m-enable-status-text></td>
    </ng-template>
  </ng-container>
  <ng-container mDataTableColumn header="操作">
    <ng-template let-id="id" let-version="Version">
      <td>
        <button mat-icon-button [matMenuTriggerFor]="editMenu">
          <mat-icon>edit</mat-icon>
        </button>

        <mat-menu #editMenu>
          <button mat-menu-item (click)="singleDelete(id)">移除</button>
        </mat-menu>
      </td>
    </ng-template>
  </ng-container>
  <m-pagination #page [useRouteQuery] = false (pageChange) ='pageChange($event)'  [length]="result.total" [pageSize]="10" >
    <div>
      <button class="btn btn-secondary btn-sm mr-3" (click)="selection.select(result.list)">
        全选
      </button>
      <button class="btn btn-secondary btn-sm" [matMenuTriggerFor]="batchMenu">批量操作</button>
      <mat-menu #batchMenu>
        <button mat-menu-item (click)="delete()">移除</button>
      </mat-menu>
    </div>
  </m-pagination>
</m-data-table>